创建第一个 Vue 应用
1. Vue.js 简介和特性
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它易于上手，同时提供了丰富的功能，如组件化、响应式数据绑定、虚拟 DOM 等。Vue.js 的设计目标是尽可能简单地集成到现有项目中，并且可以逐步应用到项目的各个部分。
主要特性：
- 响应式数据绑定：数据与视图自动同步。
- 组件化：将应用拆分为多个可复用的组件。
- 虚拟 DOM：优化 DOM 操作，提高性能。
- 灵活性：可以与其他库或现有项目无缝集成。
2. 开发环境搭建
在开始创建第一个 Vue 应用之前，我们需要搭建开发环境。这里我们使用 Vue CLI 和 Vite 两种工具来创建项目。
2.1 使用 Vue CLI 创建项目
Vue CLI 是一个官方提供的脚手架工具，可以帮助我们快速搭建 Vue 项目。
-
安装 Vue CLI：
npm install -g @vue/cli -
创建新项目：
vue create my-first-vue-app -
选择配置： 在命令行中选择默认配置或手动选择特性。
-
进入项目目录并启动开发服务器：
cd my-first-vue-app npm run serve
2.2 使用 Vite 创建项目
Vite 是一个更现代的前端构建工具，启动速度更快，适合开发小型到中型的 Vue 项目。
-
创建新项目：
npm init vite@latest my-first-vite-app -- --template vue -
进入项目目录并安装依赖：
cd my-first-vite-app npm install -
启动开发服务器：
npm run dev
3. 创建第一个 Vue 应用
无论你选择使用 Vue CLI 还是 Vite，创建的项目结构基本相同。接下来，我们将创建一个简单的 Vue 应用。
3.1 项目结构
一个典型的 Vue 项目结构如下：
my-first-vue-app/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
├── package.json
├── README.md
3.2 编辑 App.vue
App.vue 是应用的根组件。我们可以在其中编写模板、脚本和样式。
<template>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
changeMessage() {
this.message = 'Message Changed!';
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3.3 运行应用
保存文件后，Vue 开发服务器会自动重新加载页面。打开浏览器，访问 http://localhost:8080（Vue CLI）或 http://localhost:3000（Vite），你将看到以下内容：
- 一个标题显示 "Hello, Vue!"。
- 一个按钮，点击后标题变为 "Message Changed!"。
4. 实践练习
练习 1：添加新组件
- 在
src/components/目录下创建一个新的 Vue 组件HelloWorld.vue。 - 在
HelloWorld.vue中编写一个简单的模板，显示一条欢迎信息。 - 在
App.vue中引入并使用HelloWorld组件。
练习 2：动态数据绑定
- 在
App.vue中添加一个输入框，使用v-model绑定到一个新的数据属性inputText。 - 在页面中显示
inputText的值。
练习 3：条件渲染
- 添加一个布尔类型的数据属性
showMessage，初始值为true。 - 使用
v-if指令根据showMessage的值显示或隐藏标题。 - 添加一个按钮，点击后切换
showMessage的值。
5. 总结
通过本教程，你已经学会了如何使用 Vue CLI 或 Vite 创建一个简单的 Vue 应用，并了解了 Vue 的基本概念和特性。接下来，你可以继续学习 Vue 的更多高级特性，如组件化开发、路由、状态管理等，逐步构建更复杂的应用。
希望你能享受 Vue.js 带来的开发乐趣，并不断探索和实践！